<!--  -->
<template>
  <div style="display: flex">
    <div v-for="(item, i) in parmData" :key="i" style="padding-right: 5px">
      <el-button :class="item.value == parmDataKey ? 'chose-border' : ''" :style="getStyle(item)" type="primary" size="mini" plain @click="btnClick(item, item.isSel)">{{ item.text + ' ' + (item.count || '') }}</el-button>
    </div>
    <el-popover v-if="industryTypes.length" placement="bottom-end" width="150" trigger="click">
      <el-button type="primary" style="background-color: #808080" slot="reference" size="mini" plain> 业态 <i class="el-icon-arrow-down el-icon--right"></i></el-button>
      <div>
        <div v-for="(item, i) in industryTypes" :key="i + '/'">
          <el-button :style="getStyle(item) + 'width:100%;margin: 2px 0px;'" type="primary" @click="btnClick(item, item.isSel, true)" size="mini" plain>{{ item.text + ' ' + (item.count || '') }}</el-button>
        </div>
      </div>
    </el-popover>
  </div>
</template>
<script>
import dayjs from 'dayjs';
export default {
  components: {},
  props: {
    parmData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    industryTypes: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      m_Data: {
        industryTypes: [],
        parmData: null,
      },
      parmDataKey: localStorage.getItem('houseStatus') || null
    };
  },

  filters: {
    nullVal: function (msg) {
      return msg ? msg : '-';
    },
  },

  watch: {
    industryTypes: {
      immediate: true,
      deep: false,
      handler(val) {
        if (val.length)
          this.industryTypes.forEach(item => {
            let bol = false;
            if (this.m_Data.industryTypes.length) {
              let obj = this.m_Data.industryTypes.find(res => {
                return res == item.value;
              });
              if (obj) bol = true;
            }
            this.$set(item, 'isSel', bol);
          });
      },
    },
    parmData: {
      immediate: true,
      deep: false,
      handler(val) {
        if (val.length)
          this.parmData.forEach(item => {
            this.$set(item, 'isSel', false);
          });
      },
    },
  },

  methods: {
    getStyle(item) {
      let str = 'background-color:' + item.color + '; ';
      return str;
    },
    btnClick(item, check, industryTypes) {
      this.m_Data.industryTypes = [];
      this.m_Data.parmData = null;

      let listKeyName = industryTypes ? 'parmData' : 'industryTypes';
      this[listKeyName].forEach(element => {
        element.isSel = false;
      });

      item.isSel = !item.isSel;
      this.industryTypes.forEach(obj => {
        if (obj.isSel) this.m_Data.industryTypes.push(obj.value);
      });
      this.parmData.forEach(obj => {
        if (item.value == obj.value && obj.isSel) this.m_Data.parmData = obj.value;
        else obj.isSel = false;
      });
      this.parmDataKey = this.m_Data.parmData
      this.$emit('change', this.m_Data);
    },
  }
};
</script>
<style scoped lang="scss">
::v-deep .el-button {
  color: white;
}
.chose-border{
  border:2px solid #409EFF;
}
</style>